<template>
  <div class="navbar">
    <div class="sidebar">
      <!-- 
        当前公告
        个人信息
        图书列表 : 排行榜、推荐书单、所有图书
        借阅管理 : 图书借阅、图书归还
      -->
      <el-menu
        :default-active="active"
        class="el-menu-vertical-demo"
        :collapse="collapseStatus"
        background-color="#495466"
        text-color="#fff"
        router
      >
        <el-menu-item index="/user" class="management-title">
          <i class="el-icon-s-management"></i>
          <span slot="title">图书管理系统</span>
        </el-menu-item>
        <el-menu-item index="/user/notice">
          <i class="el-icon-message-solid"></i>
          <span slot="title">查看公告</span>
        </el-menu-item>
        <el-menu-item index="/user/personal">
          <i class="el-icon-s-custom"></i>
          <span slot="title">个人信息</span>
        </el-menu-item>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">图书列表</span>
          </template>
          <el-menu-item index="/user/ranking">排行榜</el-menu-item>
          <el-menu-item index="/user/recommend">推荐书单</el-menu-item>
          <el-menu-item index="/user/allbook">所有图书</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-sort"></i>
            <span slot="title">借阅管理</span>
          </template>
          <el-menu-item index="/user/borrow">图书借阅</el-menu-item>
          <el-menu-item index="/user/return">图书归还</el-menu-item>
          <el-menu-item index="/user/history">历史借阅</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="content">
      <div class="mainHeader">
        <!--侧边导航栏控制按钮-->
        <span>
          <i class="el-icon-s-fold" @click="handleFold()"></i>
        </span>
        <div class="userCenter" @click="logout">
          <!-- 用户名 -->
          <el-link
            :underline="false"
            href="#"
            class="username"
            >{{username}}</el-link
          >
          <!-- 用户头像 -->
          <el-avatar :size="40" :src="avaUrl"></el-avatar>
        </div>
      </div>
      <div class="mainContent">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserNavbar",
  data() {
    return {
      active: "/user",
      isCollapse: false,
      collapseStatus: false,
      avaUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      username: '',
    };
  },
  created() {
    this.getUserMsg();
    this.activeMenuItem();
  },
  methods: {
    handleFold() {
      this.collapseStatus = !this.collapseStatus;
    },
    goTo(path) {
      this.$router.replace(path);
    },
    activeMenuItem() {
      var url = this.$route.path;
      url = url.split("/");
      // console.log(url[2]);
      switch (url[2]) {
        case "notice":
          this.active = "/" + url[1] + "/notice";
          break;
      }
    },
    getUserMsg() {
      this.username = JSON.parse(window.sessionStorage.getItem("User")).username;
    },
    logout() {
      window.sessionStorage.removeItem("User");
      this.$message.success("退出成功，即将回到登录页面", 500);
        setTimeout(() => {
          window.location.reload();
        }, 500);
    }
  },
};
</script>
<style scoped>
/* 折叠侧边栏按钮动画 */
.el-icon-s-fold:hover {
  color: #409eff;
  cursor: pointer;
  transition: 0.3s ease;
}

.navbar {
  display: flex;
  flex-direction: row;
}
.management-title {
  background: #2d384a !important;
}
.sidebar {
  /*设置侧边栏导航高度*/
  min-height: 100vh;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  /*设置侧边栏不折叠的宽度*/
  width: 250px;
  height: 100%;
}
.el-menu--collapse {
  /*设置侧边栏折叠后的高度*/
  height: 100%;
}
.el-menu-item.is-active {
  background: #409eff !important;
  color: #fff;
}
.el-menu-vertical-demo > .el-menu-item.is-active:first-child {
  background: #2d384a !important;
  color: #fff;
}
.indexPage .el-aside {
  width: 300px; /*设置侧边导航栏宽度*/
  overflow-x: hidden;
  overflow-y: hidden;
}
.content {
  /*设置内容区包裹样式*/
  flex: 1;
  min-height: 100vh;
}
.mainHeader {
  /*头部样式设置*/
  height: 56px;
  padding: 0 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #e3eaf4;
}
.mainContent {
  /*内容区样式设置*/
  padding: 20px 20px;
  background: #fff;
}
.userCenter {
  /*头部右侧个人中心*/
  display: flex;
  align-items: center;
}
.userCenter .username {
  margin-right: 15px;
}
</style>
